<template>
    <div>
        <div v-if="curComponent.component=='v-text'">
             <!-- <el-form-item label="链接选中底线">
                      <el-switch v-model="active_component.propValue.textDecoration"></el-switch>
            </el-form-item> -->
            <el-form-item label="鼠标悬浮颜色">
                     <div class="classbgbox">
                       <div class="bgItem" @click="checkbgchange(item)" :style="{background:item.color}" v-for="(item,i)  of colorList" :key="i"></div>
                     </div>
                     <div class="flex" style="margin-top:10px;">
                        <div>当前选中</div>
                       <div class="checkItem" :style="{background:checkbg}"></div>
                     </div>
            </el-form-item>
            <el-form-item label="文字字体">
                  <el-select v-model="curComponent.style.fontFamily" placeholder="请选择">
                      <el-option
                        v-for="item in fontList"
                        :key="item.en"
                        :label="item.ch"
                        :value="item.en">
                      </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="字体颜色渐变：">
                <el-switch
                    v-model="curComponent.style.isGradient"
                    active-color="#13ce66"
                    inactive-color="#dcdfe6">
                </el-switch>
            </el-form-item>
            <el-form-item label="渐变颜色" v-show="curComponent.style.isGradient">
                <el-color-picker v-model="curComponent.style.textColor" show-alpha></el-color-picker>
                <el-color-picker v-model="curComponent.style.textColor2" show-alpha></el-color-picker>
                <el-input v-model="curComponent.style.deg" placeholder="请输入角度" type="number"></el-input>
            </el-form-item>
        </div>
    </div>
</template>

<script>
export default {
    props: ["curComponent"],
    data() {
        return {
            value: false,
            checkbg:'',
            active_component: {},
      fontList: [{
            ch: '宋体',
            en: 'SimSun'
        }, {
            ch: '黑体',
            en: 'SimHei'
        }, {
            ch: '微软雅黑',
            en: 'Microsoft Yahei'
        }, {
            ch: '微软正黑体',
            en: 'Microsoft JhengHei'
        }, {
            ch: '楷体',
            en: 'KaiTi'
        }, {
            ch: '新宋体',
            en: 'NSimSun'
        }, {
            ch: '仿宋',
            en: 'FangSong'
        },{
           ch:'苹方',
           en:'PingFang'
        }
        ],
      colorList:[
        {className:'custom_hover1',color:'rgb(252, 192, 46)'},
        {className:'custom_hover2',color:'rgb(246, 124, 1)'},
        {className:'custom_hover3',color:'rgb(230, 74, 25)'},
        {className:'custom_hover4',color:'rgb(216, 27, 67)'},
        {className:'custom_hover5',color:'rgb(142, 36, 170)'},
        {className:'custom_hover6',color:'rgb(81, 45, 167)'},
        {className:'custom_hover7',color:'rgb(31, 135, 232)'},
        {className:'custom_hover8',color:'rgb(0, 135, 129)'},
        {className:'custom_hover9',color:'rgb(5, 160, 69)'},
        {className:'custom_hover10',color:'rgb(254, 216, 53)'},
        {className:'custom_hover11',color:'rgb(251, 140, 0)'},
        {className:'custom_hover12',color:'rgb(245, 81, 30)'},
        {className:'custom_hover13',color:'rgb(235, 29, 78)'},
        {className:'custom_hover14',color:'rgb(156, 40, 177)'},
        {className:'custom_hover15',color:'rgb(93, 53, 176)'},
        {className:'custom_hover16',color:'rgb(32, 151, 243)'},
        {className:'custom_hover17',color:'rgb(2, 150, 136)'},
        {className:'custom_hover18',color:'rgb(76, 176, 80)'},
        {className:'custom_hover19',color:'rgb(255, 235, 60)'},
        {className:'custom_hover20',color:'rgb(255, 167, 39)'},
        {className:'custom_hover21',color:'rgb(254, 87, 34)'},
        {className:'custom_hover22',color:'rgb(235, 65, 101)'},
        {className:'custom_hover23',color:'rgb(170, 71, 188)'},
        {className:'custom_hover24',color:'rgb(103, 59, 183)'},
        {className:'custom_hover25',color:'rgb(66, 165, 246)'},
        {className:'custom_hover26',color:'rgb(38, 165, 154)'},
        {className:'custom_hover27',color:'rgb(131, 198, 131)'},
        {className:'custom_hover28',color:'rgb(255, 241, 118)'},
        {className:'custom_hover29',color:'rgb(255, 183, 78)'},
        {className:'custom_hover30',color:'rgb(255, 138, 102)'},
        {className:'custom_hover31',color:'rgb(241, 98, 126)'},
        {className:'custom_hover32',color:'rgb(185, 104, 199)'},
        {className:'custom_hover33',color:'rgb(121, 134, 204)'},
        {className:'custom_hover34',color:'rgb(100, 181, 246)'},
        {className:'custom_hover35',color:'rgb(128, 203, 196)'},
        {className:'custom_hover36',color:'rgb(165, 214, 167)'},
        {className:'custom_hover37',color:'rgb(255, 245, 156)'},
        {className:'custom_hover38',color:'rgb(255, 204, 128)'},
        {className:'custom_hover39',color:'rgb(255, 171, 145)'},
        {className:'custom_hover40',color:'rgb(251, 135, 158)'},
        {className:'custom_hover41',color:'rgb(207, 147, 217)'},
        {className:'custom_hover42',color:'rgb(158, 168, 219)'},
        {className:'custom_hover43',color:'rgb(144, 202, 248)'},
        {className:'custom_hover44',color:'rgb(178, 223, 220)'},
        {className:'custom_hover45',color:'rgb(200, 230, 202)'},
        {className:'custom_hover46',color:'rgb(255, 255, 255)'},
        {className:'custom_hover47',color:'rgb(222, 222, 222)'},
        {className:'custom_hover48',color:'rgb(169, 169, 169)'},
        {className:'custom_hover49',color:'rgb(75, 75, 75)'},
        {className:'custom_hover50',color:'rgb(53, 53, 53)'},
        {className:'custom_hover51',color:'rgb(33, 33, 33)'},
        {className:'custom_hover52',color:'rgb(0, 0, 0)'},
      ]
        }
    },
    methods:{
       checkbgchange(item){
       this.curComponent.hoverClass=item.className
       this.checkbg=item.color
    },
    }
};
</script>

<style scoped lang="scss">
.classbgbox{
  width: 228rem;
  // height: 152px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #999;
  .bgItem{
    width: 25px;height: 25px;
    transition: .2s;
    cursor: pointer;
  }
  .bgItem:hover{
    transform: scale(1.2);
  }
}
.checkItem{
    width: 27px;
    height: 27px;
    border: 1px solid #999;
  }
</style>
